<template>
  <div class="login">
    <div class="login-content">
      <img src="../assets/image/img14.jpg" class="login-img" alt />
      <div class="login-title">
        <h2 class="login-h2">管理系统</h2>
      </div>
      <div class="login-header">
        <div class="login-left">
          <p class="login-p">登陆</p>
          <el-input v-model="id" class="login-bottom" placeholder="请输入身份证"></el-input>
          <el-input v-model="password" class="login-bottom" show-password placeholder="请输入密码"></el-input>
          <el-button type="primary" class="login-button" @click="login">登陆</el-button>
          <p class="login-zhu">注意：默认登陆密码为身份证号后六位，请登陆系统后修改密码</p>
        </div>
        <div class="login-right">
          <div class="login-line"></div>
          <ul class="login-list">
            <li>坚定信心</li>
            <li>同舟共济</li>
            <li>科学防治</li>
            <li>精准实施</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Button, Input } from "element-ui";
import Api from "../assets/js/api";
Vue.use(Button, Input);
export default {
  data() {
    return {
      id: "", // 账号
      password: "" // 密码
    };
  },
  mounted() {},
  methods: {
    login() {
      if (this.id == "" || this.password == "") { //判断是否为空
          this.$message({
              message: "请先填写完整的信息",
              type: "error"
            });
        return
      } else { //发起请求
        let from = new FormData();
        from.append("id", this.id); // 向fromdata里面塞数据
        from.append("password", this.$md5(this.password));
        this.$http({
          url: Api.login, //接口
          method: "post", //请求方式 默认get
          data: from // data数据
        }).then(res => {
          console.log(res);
          if (res.data.status == 0) { //账号密码正确
           sessionStorage.setItem('username',res.data.name) //存数据
           sessionStorage.setItem('position',res.data.position)  //读取数据
        //    sessionStorage.removeItem('username') //移除数据
        //    localStorage.setItem('username',res.data.name) //存数据
            this.$router.push("/home");
            this.$message({
              message: "登录成功",
              type: "success"
            });
          } else {
            this.$message({
              message: "账号或密码错误",
              type: "error"
            });
          }
        });
      }
    }
  }
};
</script>
<style  scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #5d61bf;
}
.login-content {
  position: absolute;
  top: 116px;
  left: 270px;
}
.login-img {
  width: 798px;
  height: 414px;
  position: absolute;
  border-radius: 12px;
}
.login-title {
  position: absolute;
  width: 414px;
  margin-top: 30px;
  left: 350px;
}
.login-h2 {
  font-size: 28px;
  color: #fff;
}
.login-header {
  margin-top: 11px;
  position: absolute;
  width: 594px;
  height: 313px;
  background-color: #fff;
  display: inline-block;
  top: 66px;
  left: 105px;
  border-radius: 12px;
  padding-top: 30px;
  padding-left: 30px;
  box-sizing: border-box;
}
.login-left {
  width: 321px;
  height: 258px;
  text-align: center;
  float: left;
}
.login-p {
  font-size: 21px;
  font-weight: bold;
  color: #838ab6;
  margin-bottom: 20px;
}
.login-bottom {
  margin-bottom: 20px;
}
.login-button {
  width: 321px;
}
.login-zhu {
  font-size: 15px;
  color: #487467;
  margin-top: 14px;
}
.login-line {
  display: inline-block;
  height: 164px;
  width: 0px;
  border: 1px solid #dcdcdc;
}
.login-right {
  float: right;
  width: 178px;
  margin-top: 36px;
}
.login-list {
  display: inline-block;
  font-size: 18px;
  color: #8399d0;
  font-weight: bold;
  margin-left: 50px;
  margin-bottom: 10px;
}
.login-list li {
  margin-bottom: 21px;
}
</style>